<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         :root {
            --nav-color: #292922;
            --bg-color: #fff;
        }
        
        body {
            background-color: var(--bg-color);
            transition: 0.4s;
        }
        
        .theme-switch svg {
            fill: var(--nav-color)
        }
        
        [data-theme="dark"] {
            --nav-color: #fff;
            --bg-color: #131617;
        }
        
        [data-theme="light"] {
            --nav-color: #fff;
            --bg-color: #131617;
        }
        
        .theme-switch {
            display: inline-block;
            cursor: pointer;
        }
        
        .theme-switch .mode-container {
            display: flex;
        }
        
        #checkbox {
            display: none;
        }
        
        #checkbox:checked+.mode-container .light {
            display: inline-block;
        }
        
        #checkbox+.mode-container .light {
            display: none;
        }
        
        #checkbox:checked+.mode-container .dark {
            display: none;
        }
        
        #checkbox+.mode-container .dark {
            display: inline-block;
        }
    </style>
</head>

<body>
    <label class="theme-switch" for="checkbox">
    <input type="checkbox" id="checkbox">
    <span class="mode-container">
        <svg t="1621088186573" class="dark" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5481" width="20" height="20"><path d="M572.4 229.9c8.8-8.8 21.9-11.7 33.6-7.5 115.1 41.7 197.5 152 197.5 281.6 0 165.4-134.1 299.5-299.5 299.5-129.6 0-239.9-82.3-281.6-197.5-4.2-11.7-1.3-24.8 7.5-33.6s21.9-11.7 33.6-7.5c25 9 51.9 14 80.1 14 129.9 0 235.3-105.3 235.3-235.3 0-28.2-4.9-55.2-14-80.1-4.2-11.7-1.3-24.8 7.5-33.6z m69.1 83.2c1 10 1.5 20.2 1.5 30.5C643 509 508.9 643 343.6 643c-10.3 0-20.5-0.5-30.5-1.5 42.7 59.3 112.4 97.8 191 97.8C634 739.3 739.3 634 739.3 504c0-78.5-38.5-148.2-97.8-190.9z" p-id="5482"></path></svg>
        <svg t="1621088029175" class="light" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4193" width="20" height="20"><path d="M512 810.666667c-164.949333 0-298.666667-133.717333-298.666667-298.666667S347.050667 213.333333 512 213.333333 810.666667 347.050667 810.666667 512 676.949333 810.666667 512 810.666667z m0-51.2c136.669867 0 247.466667-110.7968 247.466667-247.466667S648.669867 264.533333 512 264.533333 264.533333 375.330133 264.533333 512 375.330133 759.466667 512 759.466667zM512 878.933333a25.6 25.6 0 0 1 25.6 25.6v68.266667a25.6 25.6 0 0 1-51.2 0v-68.266667a25.6 25.6 0 0 1 25.6-25.6z m-295.662933-107.4688a25.6 25.6 0 0 1 36.1984 36.1984l-48.264534 48.2816a25.6 25.6 0 0 1-36.215466-36.215466z m555.127466 0a25.6 25.6 0 0 1 36.1984 0l48.2816 48.264534a25.6 25.6 0 0 1-36.215466 36.215466l-48.264534-48.2816a25.6 25.6 0 0 1 0-36.1984zM972.8 486.4a25.6 25.6 0 0 1 0 51.2h-68.266667a25.6 25.6 0 0 1 0-51.2z m-853.333333 0a25.6 25.6 0 0 1 0 51.2H51.2a25.6 25.6 0 0 1 0-51.2zM819.729067 168.055467a25.6 25.6 0 0 1 36.215466 36.215466l-48.2816 48.264534a25.6 25.6 0 0 1-36.1984-36.1984z m-651.6736 0a25.6 25.6 0 0 1 36.215466 0l48.264534 48.2816a25.6 25.6 0 0 1-36.1984 36.1984L168.055467 204.288a25.6 25.6 0 0 1 0-36.215467zM512 25.6A25.6 25.6 0 0 1 537.6 51.2v68.266667a25.6 25.6 0 0 1-51.2 0V51.2A25.6 25.6 0 0 1 512 25.6z" fill="#e6e6e6" p-id="4194"></path></svg>  
    </span>
    </label>
</body>

</html>
<script>
    var btn = document.getElementById("checkbox")
    btn.onchange = function(evn) {
        if (evn.target.checked) {
            document.documentElement.setAttribute("data-theme", "dark")
        } else {
            document.documentElement.setAttribute("data-theme", "light")
        }
    }
</script>